<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="slide.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
    <!--<script type="text/javascript" src="js/slide.js"></script>-->
    <script type="text/javascript" src="js/sl.js"></script>
    <link type="text/css" rel="stylesheet" href="css/carousel.css">
    <script type="text/javascript" src="js/carousel.js"></script>
    <link rel="stylesheet" href="css/tab.css"/>
    <script type="text/javascript" src="js/tab.js"></script>
    <style>
        body {
            padding-top: 50px;
        }
        body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}
        ul,li {list-style:none; margin:0px; padding:0px;}
        img {border:0;}
        .focus {width:800px; height:280px; overflow:hidden; position:relative;}
        .focus ul {height:380px; position:absolute;}
        .focus ul li {float:left; width:800px; height:280px; overflow:visible; position:relative; background:#000;}
        .focus ul li div {position:absolute; overflow:hidden;}
        .focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000; display:none;}
        .focus .btn {position:absolute; width:780px; height:23px; padding:0px 10px 0px 10px; right:0; bottom:6px; text-align:right;}
        .focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:24px; line-height:24px; text-align:center; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
        .focus .btn span.on {background:#fff;}
        .focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
        .focus .pre {left:0;}
        .focus .next {right:0; background-position:right top;}
    </style>
    <script type="text/javascript">
        $(function(){
            $.focus("#focus001");
        });
    </script>
</head>
<body>
<nav class="navbar navbar-fixed-top navstyle" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">项目港</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">展馆</a></li>
                <li><a href="#">项目</a></li>
                <li><a href="#">C语言</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">更多</a></li>
            </ul>

       <span class="left">
            <form class="navbar-form navbar-left" role="search" id="searchForm">
                <div class="form-group">
                    <!--<i class="fa fa-search"></i>-->
                    <span class="icon-search"></span>
                    <input type="text" class="form-control" placeholder="搜索框" name="searchKeyWord" id="search-text">
                </div>
            </form>
           <span class="regit">
            <a href="#">注册</a>
               <a>|</a>
            <a href="#">登陆</a>
           </span>
        </span>
        </div>

    </div>
</nav>

<div class="container bannerstyle">

</div>
//1
<div class="focus" id="focus001">
    <ul>
        <li><a href="#" target="_blank"><img src="img/02.jpg" alt="img1" /></a></li>
        <li><a href="#" target="_blank"><img src="img/03.jpg" alt="img2" /></a></li>
        <li><a href="#" target="_blank"><img src="img/04.jpg" alt="img3" /></a></li>
    </ul>
</div>
//2

<div class="J_Poster poster-main" data-setting='{
                                                                                    "width":800,
                                                                                    "height":270,
                                                                                    "posterWidth":640,
                                                                                    "posterHeight":270,
                                                                                    "scale":0.8,
                                                                                    "autoPlay":true,
                                                                                    "delay":5000,
                                                                                    "speed":300,
                                                                                    "vericalAlign":"top"
																					}'>
    <div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
        <li class="poster-item"><a href="#"><img src="img1/1.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img1/2.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img1/3.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img1/4.jpg" width="100%" height="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>

<script>

    $(function(){
        Carousel.init($(".J_Poster"));
    });
</script>

//3
标签页是昨天做的。前两个网上源码昨天研究了下，现场做好多bug...所以直接贴上来了。

<div id="notice" class="notice">
    <div id="notice-tit" class="notice-tit">
        <ul>
            <li class="select">
                <a href="#">公告</a>
            </li>
            <li>
                <a href="#">规则</a>
            </li>
            <li>
                <a href="#">论坛</a>
            </li>
            <li>
                <a href="#">安全</a>
            </li>
            <li>
                <a href="#">公益</a>
            </li>
        </ul>
    </div>
    <div id="notice-con" class="notice-con">
        <div class="mod">
            <ul>
                <li>
                    <a href="#">
                        张勇：要玩快乐足球
                    </a>
                </li>
                <li>
                    <a href="#">
                        阿里2000万支援灾区！
                    </a>
                </li>
                <li>
                    <a href="#">
                        旅游宝让你边玩边赚钱
                    </a>
                </li>
                <li>
                    <a href="#">
                        多行跟进阿里信用贷款
                    </a>
                </li>
            </ul>
        </div>
        <div class="mod">
            <ul>
                <li>
                        <span>
                            [
                            <a href="#">通知</a>
                            ]
                        </span>
                    <a href="#">
                        ”滥发“即将换新
                    </a>
                </li>
                <li>
                        <span>
                            [
                            <a href="#">通知</a>
                            ]
                        </span>
                    <a href="#">
                        比特币严管啦！
                    </a>
                </li>
                <li>
                        <span>
                            [
                            <a href="#">通知</a>
                            ]
                        </span>
                    <a href="#">
                        禁发商品名录
                    </a>
                </li>
                <li>
                        <span>
                            [
                            <a href="#">通知</a>
                            ]
                        </span>
                    <a href="#">
                        商品属性限制
                    </a>
                </li>
            </ul>
        </div>
        <div class="mod">
            <ul>
                <li>
                    <span>
                        [
                        <a href="#">聚焦</a>
                        ]
                    </span>
                    <a href="#">
                        金牌卖家再起航
                    </a>
                </li>
                <li>
                    <span>
                        [
                        <a href="#">功能</a>
                        ]
                    </span>
                    <a href="#">
                        橱窗规则升级啦
                    </a>
                </li>
                <li>
                    <span>
                        [
                        <a href="#">话题</a>
                        ]
                    </span>
                    <a href="#">
                        又爱又恨优惠券
                    </a>
                </li>
                <li>
                    <span>
                        [
                        <a href="#">工具</a>
                        ]
                    </span>
                    <a href="#">
                        购后送店铺红包
                    </a>
                </li>
            </ul>
        </div>
        <div class="mod">
            <ul>
                <li>
                    <a href="#">
                        个人重要信息要管牢！
                    </a>
                </li>
                <li>
                    <a href="#">
                        卖家防范红包欺诈提醒
                    </a>
                </li>
                <li>
                    <a href="#">
                        更换收货地址的陷阱！
                    </a>
                </li>
                <li>
                    <a href="#">
                        注意骗子的技术升级了！
                    </a>
                </li>
            </ul>
        </div>
        <div class="mod">
            <ul>
                <li>
                    <a href="#">
                        祝贺学院校友会成立5
                    </a>
                </li>
                <li>
                    <a href="#">
                        软件工程系召开校企合作洽谈会
                    </a>
                </li>
                <li>
                    <a href="#">
                        无偿献血 奉献爱心
                    </a>
                </li>
                <li>
                    <a href="#">
                        学院大学生活动中心落成开放
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
